<template>
  <div>
    <!-- 如果用$set就是响应式，直接添加不是 -->
    <button @click="fn1">动态添加obj.height</button>
    <button @click="obj.height = 155">修改height</button>
    <p>{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}</p>

    <button @click="list.push(999)">添加</button>
    <button @click="list.shift()">删除</button>
    <button @click="list = ['a','b','c']">给数组重新赋值</button>
    <!-- 直接通过下标改元素不是响应式的 -->
    <button @click="list[0] = 123456">通过下标修改数据</button>
    <!-- 数组也可以用$set来通过下标修改元素 -->
    <button @click="$set(list, 0, 123456)">通过$set用下标修改数据</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>

    <p>app.vue</p>

    <son />
    <son2 />
  </div>
</template>

<script>
import son from "./components/son";
import son2 from "./components/son2";
export default {
  components: {
    son,
    son2,
  },

  data() {
    return {
      obj: {
        name: "jack",
        age: 16,
      },

      list: [10, 20, 30, 40, 50],
    };
  },

  methods: {
    fn1() {
      // this.obj.name = 'rose'
      // this.obj.age = 14
      // // 对象可以动态的添加属性
      // this.obj.height = 175 // 界面没变化

      // 我就是想给对象动态添加一个属性，而且还要是响应式的
      // 那么就要用 $set (Vue3里没这个玩意)
      // 参数1：给哪个对象添加属性
      // 参数2：添加什么属性（属性名）
      // 参数3：给什么值（属性值）
      this.$set(this.obj, "height", 175);
    },
  },
};
</script>

